<template>
  <div class="search">
    <h1>用户名登录</h1>
    <!-- <el-input
      v-model="username"
      prefix-icon="el-icon-search"
      placeholder="请输入你的网易云用户名"
    /> -->
    <div class="searchBox">
      <span class="iconfont icon-sousuoxiao" />
      <input
        v-model.trim="username"
        type="text"
        placeholder="请输入你的网易云用户名"
        @keyup.enter="searchUser"
      >
    </div>
    <div v-if="result" class="search-result">
      <div class="info">在列表中选中你的账号</div>
      <div class="userList">
        <div
          v-for="(item,index) in users"
          :key="item.userId"
          :class="{active:index===ind}"
          class="list"
          @click="ind=index"
        >
          <img :src="item.avatarUrl" alt="">
          <div class="nickname">
            {{ item.nickname }}
          </div>
        </div>
      </div>
      <button class="btnOk" @click="btnOk">确认</button>
    </div>
    <p v-else>按Enter搜索</p>
  </div>
</template>

<script>
import { searchUser } from '@/api/user'
export default {
  data() {
    return {
      username: '葫芦岛大仙',
      users: [],
      ind: 0, // 点击选择要登录的用户的索引
      result: false
    }
  },
  methods: {
    async searchUser() {
      // 根据搜索内容获取结果
      const res = await searchUser({ keywords: this.username, type: 1002 })
      this.users = res.data.result.userprofiles
      // 显示搜索结果
      this.result = true
      // console.log(res.data.result.userprofiles)
    },
    btnOk() {
      this.$store.dispatch('getUid', this.users[this.ind].userId)
      this.$store.dispatch('getImg', this.users[this.ind].avatarUrl)
      this.$router.push('/library')
      // console.log(this.users[this.ind].userId)
    }
  }
}
</script>

<style lang='less' scoped>
.search{
  padding-bottom:50px ;
  .searchBox{
      display: flex;
    align-items: center;
    height: 48px;
    border-radius: 11px;
    width: 340px;
    background: rgb(232, 239, 253);
    box-sizing: border-box;
    .icon-sousuoxiao{
    height: 22px;
    width: 22px;
    color: #335eea;
    margin-left: 12px;
    margin-right: 8px;
    font-size: 22px;
    }
    input{
      flex:1;
      border: none;
      outline: none;
      height: 28px;
      font-size: 22px;
      color: #335eea;
      font-weight: bold;
      background-color: rgb(232, 239, 253);
    }
}
p {
  font-size: 14px;
  opacity: .78;
}
.search-result{
   width: 100%;
  .info {
    font-size: 14px;
    font-weight: 500;
    margin: 25px 0;
    opacity: .78;
  }
  .userList{
    display: flex;
    flex-wrap: wrap;
    .list {
    margin-right: 16px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    padding: 12px 12px 12px 16px;
    border-radius: 8px;
    width: 256px;
    transition: .2s;
    &:hover{
      background-color: rgb(245, 245, 247);
    }
    img {
      border-radius: 50%;
      height: 44px;
      width: 44px;
    }
    .nickname{
      font-size: 18px;
      margin-left: 12px;
    }
  }
  }
  .active {
    color: #335eea;
    background-color: #eaeffd;
  }
}
.btnOk{
  border: none;
  height: 40px;
    min-width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    line-height: 18px;
    font-weight: 600;
    background-color: #eaeffd;
    color: #335eea;
    margin-right: 12px;
    transition: .2s;
    border-radius: 8px;
    padding: 8px 16px;
    cursor: pointer;
}
}
</style>
